---
slug: postcss #路径，不能重复
title: postcss # 标题
authors: [] # 作者，在authors.yml配置
tags: [facebook, hello, docusaurus] # 标签，在tags.yml配置
toc_min_heading_level: 2 # 最小展示标题
toc_max_heading_level: 5 # 最大展示标题
---

> 类似与一个css样式处理的插座，具体功能由插件实现

* 通过js转换样式的工具

* 比如添加浏览器适配，自动添加浏览器前缀，css样式的重置

* postcss本身基本做不了什么事，需要依赖对应的插件

### 如何使用？

1. 查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader

2. 添加你需要的PostCSS插件


#### 安装postcss

```shell
npm install postcss
```

**直接使用不行，我们需要安装`postcss-cli`才可以在命令行中使用postcss**

```shell
npm install postcss-cli

```

#### 使用

> -o:输出文件

```css title="src/style/test.css"
:fullscreen{

}

.content{
    user-select: none;
    transition: all 2s ease-in-out;
}

```

```shell
npx postcss -o result.css ./src/style/test.css

```

是生成了result.css，但是result.css内部只是把test.css内容复制过去了，这是因为**postcss本身能做的事情非常少，具体功能需要依赖插件**


##### 安装插件

###### autoprefixer
> 自动添加浏览器前缀插件

```shell
npm install autoprefixer
```

再次使用

* --use  使用插件


```shell
npx postcss --use autoprefixer -o result.css ./src/style/test.css
```

输出

```css title="result.css"
:fullscreen{

}

.content{
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    transition: all 2s ease-in-out;
}
```


#### postcss-loader
> 在webpack中使用postcss,但是直接使用postcss-loader不生效，因为postcss需要插件处理

```shell
npm install postcss-loader
```

##### webpack中配置

> 先使用postcss-loader处理,同时在options内部配置autoprefixer

```js title="webpack.config.js"
    module: {
        //配置loader
        rules: [
            {
                test: /\.css$/,//匹配资源
                use: ["style-loader", "css-loader",'postcss-loader',{
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [require("autoprefixer")],
                            }
                        }
                    }],
            },
        ]
    }
```

##### postcss-preset-env

> autoprefixer其实配置的较少，大部分会使用postcss-preset-env,因为**postcss-preset-env集成了autoprefixer**

```shell
npm install postcss-preset-env
```

###### 使用

```js
 module: {
        //配置loader
        rules: [
        {
                test: /\.less$/,
                use: ["style-loader","css-loader" ,"less-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [require("postcss-preset-env")],
                            }
                        }
                    }]
            }]
}

```


#### postcss配置文件

> less，css都需要postcss，一遍遍写太复杂了，可以把postcss抽离到配置文件中

```js title="postcss.config.js"
module.exports = {
    plugins:[require('postcss-preset-env')]
}

```

这样webpack.config.js就可以简写了


```js title="webpack.config.js"
const path = require("node:path");
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",//输出文件名
        path: path.resolve(__dirname, "../dist/bundle"),//必须是一个绝对路径
    },
    module: {
        //配置loader
        rules: [
            {
                test: /\.css$/,//匹配资源
                use: ["style-loader", "css-loader",'postcss-loader'],
            },
            {
                test: /\.less$/,
                use: ["style-loader","css-loader" ,'postcss-loader',"less-loader"],
            }
        ]
    }
}

```


### 问题
> index.js中引用了index.css,在index.css中@import "./test.css",会发现postcss没有对test.css做处理

#### 原因

> `use: ["style-loader", "css-loader",'postcss-loader'],` 先`postcss-loader`处理后css-loader处理遇到了`@import './test.css'`时
>  不会调用postcss-loader，导致没有被postcss-loader处理

##### 解决
`{loader: "css-loader",options:{importLoaders: 1}}`指定由其前面的多少个loader处理

* loader  当css-loader处理时

* importLoaders 对于import导入的css文件而言由其前面的n个loader重新处理


```js title="webpack.config.js"
const path = require("node:path");
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",//输出文件名
        path: path.resolve(__dirname, "../dist/bundle"),//必须是一个绝对路径
    },
    module: {
        //配置loader
        rules: [
            {
                test: /\.css$/,//匹配资源
                use: ["style-loader",
                    {
                        loader: "css-loader",
                        options:{
                            importLoaders: 1,//被前面的loader处理一次
                        }
                    }
                    ,'postcss-loader'],
            },
            {
                test: /\.less$/,
                use: ["style-loader", {
                    loader: "css-loader",
                    options:{
                        importLoaders: 2//被前面的两个loader处理一次
                    }
                } ,'postcss-loader',"less-loader"],
            }
        ]
    }
}

```
